<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="height: auto">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="书名">
                    <el-input v-model="where.bookname" placeholder="书名"></el-input>
                </el-form-item>
                <el-form-item label="出版社">
                    <el-input v-model="where.bookpress" placeholder="出版社"></el-input>
                </el-form-item>
                <el-form-item label="作者">
                    <el-input v-model="where.bookauthor" placeholder="作者"></el-input>
                </el-form-item>
                <el-form-item label="出版时间">
                    <el-date-picker v-model="where.pressdate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                    <el-button type="primary" @click="openEditor">新增</el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column fixed prop="id" label="书籍编号" style="width:80px"></el-table-column>
                <el-table-column fixed prop="bookname" label="书籍名称" style="width: 120px" ></el-table-column>
                <el-table-column fixed prop="bookpress" label="出版社" style="width: 100px"></el-table-column>
                <el-table-column fixed prop="pressdate" label="出版时间" style="width: 100px" ></el-table-column>
                <el-table-column fixed prop="bookauthor" label="作者" style="width: 100px"></el-table-column>
                <el-table-column fixed prop="bookcount" label="数量" style="width: 80px"></el-table-column>
                <el-table-column fixed prop="bookimage" label="封面" style="width: 200px">
                    <!--                    http://localhost:8080/bookdemo1_war_exploded/back/index.html
                                            /images/计算机组成原理.jpg => http://localhost/images/计算机组成原理.jpg
                                            在网页中,/开头表示的是绝对路径，/ 表示的服务器根目录
                                            服务器根目录：http://localhost
                                            项目根目录：http://localhost:8080/bookdemo1_war_exploded
                                            在java代码中，/ 开头表示的是绝对路径， /表示的是项目根目录
                    -->
                    <template slot-scope="a" >
                        <img :src="a.row.bookimage" height="100px">
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="150">
                    <template slot-scope="scope" style="display: flex;flex-direction: column; justify-content: space-between;">
                        <el-button @click="openEditor(scope.row)" type="button" size="small">编辑</el-button>
                        <el-button @click="del(scope.row.id)" type="button" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="where.rows"
                     @current-change="queryPage" >
            </el-pagination>
        </el-footer>
    </el-container>

    <el-dialog title="书籍信息" :visible.sync="bookEditorVisible">
        <div style="display: flex;flex-direction: row;justify-content: space-between;overflow: hidden">
        <el-form :model="book">
            <el-form-item label="书名" width="60">
                <el-input v-model="book.bookname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出版社" width="80">
                <el-select v-model="book.bookpress" placeholder="请选择出版社">
                    <el-option v-for="p in pressItem"  :label="p.bookpress" :value="p.bookpress"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="出版时间" width="120">
                <el-date-picker v-model="book.pressdate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item label="作者" width="120">
                <el-input v-model="book.bookauthor" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="数量" width="80">
                <el-input v-model="book.bookcount" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图片" width="120">
                <el-input v-model="book.bookimage" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-upload :show-file-list="false"
                    action="../images"
                    :on-success="handleAvatarSuccess"
                   :before-upload="beforeAvatarUpload">
            <img  :src="book.bookimage ||'../images/noimg.png'"  style="height:  350px;padding-left: 20px"  >
<!--            <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
        </el-upload>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="bookEditorVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>

</div>

<script>
    new Vue({
        el: "#app",
        data: {
            tableData: [],
            where:{bookname:"",bookpress:"",bookauthor:"",pressdate:null,page:1,rows:4},
            book:{bookname:"",bookpress:"",bookauthor:"",pressdate:"",bookimage:"",bookcount:""},
            bookEditorVisible:false,
            total:0,
            pressItem:[],
        },
        methods: {
            query() {
                axios.get("../book/query",{
                    params:this.where
                })
                    .then(res => {
                        this.tableData = res.data.data;
                        this.total = res.data.total

                    })
            },
            queryPage(page){
                this.where.page = page;
                this.query();
            },
            save(){
                //发送请求，保存图书信息
                let params = new URLSearchParams();
                for (let name in this.book){
                    params.append(name,this.book[name]);
                }
                axios.post("../book/save",params).then(res=>{
                    if (res.data.code == 1){
                        //提示信息，自动关闭
                        this.$message(res.data.msg);
                        //关闭窗口
                        this.bookEditorVisible = false;
                        //查询图书信息
                        this.query();
                    }else {
                        //警告，手动关闭
                        this.$alert(res.data.msg);
                    }
                })

            },
            openEditor(row){
                if (row instanceof PointerEvent){
                    //清空book对象
                    for (let name in this.book){
                        this.book[name] = "";
                    }
                    //删除book对象中的id属性，因为id是自增的，所有不需要赋值
                    delete this.book.id;
                }else {
                    //把row中的数据赋值给book对象
                    for (let name in row){
                        if (name == "pressdate"){
                            if (row[name]){
                                let arr = row[name].split(/\D+/);
                                let date = new Date(parseInt(arr[2]),parseInt(arr[0]) - 1,parseInt(arr[1]));
                                this.book[name] = date;
                            }
                        }else {
                            this.book[name] = row[name];
                        }
                    }
                }
                this.bookEditorVisible  = true;
            },
            handleAvatarSuccess(res, file) {
                console.info(res)
                //这个res不是axios的res，而是axios的res.data
                //axios=>res.data.data =>图片路径
                //这里的res === axios 的 res.data，所有res.data就是图片路径
                this.book.bookimage = '../images/' + res.data;
            },
            //上传图片成功的回调函数
            beforeAvatarUpload(file) {
                const isJPG = file.type.startsWith('image/') ;
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是图片文件!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            del(id){
                axios.get("../book/delete",{
                    params: {id:id}
                }).then(res=>{
                    if (res.data.code == 1){
                        this.$message(res.data.msg);
                        this.tableData = this.tableData.filter(row=>row.id != id);
                    }else {
                        this.$alert(res.data.msg)
                    }
                })
            }

        },
        created() {
            this.query();
            axios.get("../book/queryPressItems").then(res=>this.pressItem = res.data)
        }
    })
</script>
</body>
</html>